<template>
  <div id="settings-wrapper">
    <v-card
      id="settings"
      class="py-2 px-4"
      color="rgba(0, 0, 0, .3)"
      dark
      flat
      link
      min-width="90"
    >
      <v-icon> mdi-cog </v-icon>
    </v-card>

    <v-menu
      v-model="menu"
      :close-on-content-click="false"
      activator="#settings"
      bottom
      content-class="v-settings"
      left
      nudge-left="8"
      offset-x
      origin="top right"
      transition="scale-transition"
    >
      <v-card class="text-center mb-0" width="300">
        <v-card-text>
          <strong class="mb-2 d-inline-block">侧边栏的滤镜</strong>

          <v-item-group v-model="color">
            <v-item v-for="color in colors" :key="color" :value="color">
              <template v-slot="{ active, toggle }">
                <v-avatar
                  :class="active && 'v-settings__item--active'"
                  :color="color"
                  class="v-settings__item"
                  size="25"
                  @click="toggle"
                />
              </template>
            </v-item>
          </v-item-group>

          <v-divider class="my-2 secondary" />

          <strong class="2 d-inline-block"> 边栏背景 </strong>

          <v-item-group v-model="scrim">
            <v-item
              v-for="scrim in scrims"
              :key="scrim"
              :value="scrim"
              class="mx-1"
            >
              <template v-slot="{ active, toggle }">
                <v-avatar
                  :class="active && 'v-settings__item--active'"
                  :color="scrim"
                  class="v-settings__item"
                  size="24"
                  @click="toggle"
                />
              </template>
            </v-item>
          </v-item-group>

          <v-divider class="my-2 secondary" />

          <v-row align="center" no-gutters>
            <v-col cols="auto"> 暗黑模式 </v-col>

            <v-spacer />

            <v-col cols="auto">
              <v-switch
                v-model="$vuetify.theme.dark"
                class="ma-0 pa-0"
                color="secondary"
                hide-details
              />
            </v-col>
          </v-row>

          <v-divider class="my-2 secondary" />

          <v-row align="center" no-gutters>
            <v-col cols="auto"> 迷你侧边栏 </v-col>

            <v-spacer />

            <v-col cols="auto">
              <v-switch
                v-model="internalValue"
                class="ma-0 pa-0"
                color="secondary"
                hide-details
              />
            </v-col>
          </v-row>

          <v-divider class="my-2 secondary" />

          <v-row align="center" no-gutters>
            <v-col cols="auto"> 显示面包屑 </v-col>

            <v-spacer />

            <v-col cols="auto">
              <v-switch
                v-model="isOpenBread"
                class="ma-0 pa-0"
                color="secondary"
                hide-details
              />
            </v-col>
          </v-row>

          <v-divider class="my-2 secondary" />

          <v-row align="center" no-gutters>
            <v-col cols="auto"> 侧边栏的背景图 </v-col>

            <v-spacer />

            <v-col cols="auto">
              <v-switch
                v-model="showImg"
                class="ma-0 pa-0"
                color="secondary"
                hide-details
              />
            </v-col>
          </v-row>

          <v-divider class="my-2 secondary" />

          <strong class="mb-2 d-inline-block">背景图片</strong>

          <v-item-group
            v-model="image"
            class="d-flex justify-space-between mb-2"
          >
            <v-item
              v-for="image in images"
              :key="image"
              :value="image"
              class="mx-1"
            >
              <template v-slot="{ active, toggle }">
                <v-sheet
                  :class="active && 'v-settings__item--active'"
                  class="d-inline-block v-settings__item"
                  @click="toggle"
                >
                  <v-img :src="image" height="100" width="50" />
                </v-sheet>
              </template>
            </v-item>
          </v-item-group>

          <div class="my-12" />
        </v-card-text>
      </v-card>
    </v-menu>
  </div>
</template>

<script>
// Mixins
import Proxyable from "vuetify/lib/mixins/proxyable";
import { mapMutations, mapState } from "vuex";

export default {
  name: "GlobalCoreSettings",

  mixins: [Proxyable],

  data: () => ({
    color: "#E91E63",
    colors: ["#9C27b0", "#00CAE3", "#4CAF50", "#ff9800", "#E91E63", "#FF5252"],
    image: "/image/menu-bg-1.jpeg",
    images: [
      "/image/menu-bg-1.jpeg",
      "/image/menu-bg-2.jpeg",
      "/image/menu-bg-3.jpeg",
      "/image/menu-bg-4.jpeg",
    ],
    menu: false,
    scrim: "rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)",
    scrims: [
      "rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)",
      "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
      "rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)",
    ],
    showImg: true,
    isOpenBread: true,
  }),

  computed: {
    ...mapState({
      barImage: (state) => state.app.barImage,
    }),
  },

  watch: {
    color(val) {
      this.$vuetify.theme.themes[this.isDark ? "dark" : "light"].primary = val;
    },
    showImg(val) {
      if (!val) {
        this.saveImage = this.barImage;
        this.setBarImage("");
      } else if (this.saveImage) {
        this.setBarImage(this.saveImage);
        this.saveImage = "";
      } else {
        this.setBarImage(val);
      }
    },
    image(val) {
      this.setBarImage(val);
    },
    scrim(val) {
      this.$store.commit("SET_SCRIM", val);
    },
    isOpenBread(val) {
      this.$store.commit("SET_OPENBREAD", val);
    },
  },

  methods: {
    ...mapMutations({
      setBarImage: "SET_BAR_IMAGE",
    }),
  },
};
</script>

<style lang="sass">
.v-settings
    .v-item-group > *
        cursor: pointer

    &__item
        border-width: 3px
        border-style: solid
        border-color: transparent !important

        &--active
            border-color: #00cae3 !important

#settings
    position: fixed
    top: 115px
    right: -35px
    border-radius: 8px
</style>
